<template>
  <div class="search">
    <a-form :model="tableData" name="basic" layout="inline" autocomplete="off" v-bind="layout" :label-col="layout.labelCol">
      <a-form-item class="search_in" label="接口来源" name="apiSource">
        <a-select v-model:value="tableData.apiSource" allow-clear placeholder="请选择" style="width: 140px" :options="InterFaceSource" />
      </a-form-item>
      <a-form-item class="search_in" label="API状态" name="apiStatus">
        <a-select v-model:value="tableData.apiStatus" allow-clear placeholder="请选择" style="width: 140px" :options="options" />
      </a-form-item>
      <a-form-item class="search_in" label="接口名称" name="apiName">
        <a-input v-model:value="tableData.apiName" placeholder="请输入" />
      </a-form-item>
      <a-form-item>
        <a-button @click="reset">重置</a-button>
      </a-form-item>
      <a-form-item><a-button type="primary" @click="searchCodeTables">查询</a-button></a-form-item>
    </a-form>
    <!-- <div class="select">
      <span>接口来源:</span>
      <a-select ref="select" v-model:value="tableData.apiSource" placeholder="请选择" style="width: 120px" @change="handleChange">
        <a-select-option v-for="(item, index) in apiSourceOptions" :key="index" :value="item.value">{{ item.label }}</a-select-option>
      </a-select>
    </div>
    <div class="input">
      <span>API状态：</span>
      <a-select ref="select" v-model:value="tableData.apiStatus" placeholder="请选择" style="width: 120px" @change="handleChange">
        <a-select-option v-for="(item, index) in options" :key="index" :value="item.value">{{ item.label }}</a-select-option>
      </a-select>
    </div>
    <div class="input">
      <span>接口名称：</span>
      <a-input v-model:value="tableData.apiName" placeholder="请输入" />
    </div>
    <a-button @click="reset">重置</a-button>
    <a-button type="primary" @click="searchCodeTables">查询</a-button> -->
  </div>
</template>
<script lang="ts" setup>
  import { CodeTableStatus } from '@/enums/statusEnum';
  import { getInterfaceManagementHook } from '@/hooks/InterfaceManagementHooks/getInterfaceManagementHooks';
  const layout = {
    labelCol: { span: 10 },
    wrapperCol: { span: 12 },
  };

  // 选择器的三种状态
  const options: {
    value: number;
    label: String;
  }[] = [
    {
      value: CodeTableStatus.未发布,
      label: '未发布',
    },
    {
      value: CodeTableStatus.已发布,
      label: '已发布',
    },
    {
      value: CodeTableStatus.已停用,
      label: '已停用',
    },
  ];

  //接口来源
  const InterFaceSource = [
    {
      value: '数据服务',
      label: '数据服务',
    },
    {
      value: '指标管理',
      label: '指标管理',
    },
    {
      value: '决策引擎',
      label: '决策引擎',
    },
  ];

  // 使用hooks
  const { tableData, getList } = getInterfaceManagementHook();
  // 请求接口--模糊查询
  const searchCodeTables = async () => {
    tableData.pageNum = 1;
    tableData.pageSize = 10;
    await getList();
  };
  // 重置输入框
  const reset = async () => {
    tableData.apiName = '';
    tableData.apiSource = '';
    tableData.apiStatus = '';
    await getList();
  };
</script>

<style lang="less" scoped></style>
